<template>
  <div class="row">
    <div class="col-md-12">
      <FrontSideTable
        v-show="currentView === MAINTAIN_VIEW"
        ref="maintainTable"
        dataUrl="/maintain/getList"
        addUrl="/maintain/addMaintainPlan"
        editUrl="/maintain/edit"
        deleteUrl="/maintain/delete"
        tableTitle="养护计划列表"
        :columns="columns"
        searchHint="输入关键字进行搜索，多个关键字用空格隔开"
        :searchProps="searchProps"
        :form="form"
        :loadingForm="loadingForm"
        :rules="rules"
        @beforeAdd="handleAdd"
        @beforeEdit="handleEdit"
        @onTableCreated="handleTableCreated"
        @onManage="handleManage"
        @onCount="handleCount"
        manageBtnName="桥梁"
        manageable
        countable>

        <template slot="form">
          <el-form-item label="计划名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入计划名称"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="form.notes" placeholder="请输入备注"></el-input>
          </el-form-item>
        </template>

      </FrontSideTable>

      <!--桥梁管理的界面-->
      <MaintainBridge
        v-if="currentView === BRIDGE_VIEW"
        :maintain="currentMaintain"
        @onBack="handleBack">
      </MaintainBridge>

      <!--费用统计界面-->
      <MaintainStatistic
        v-if="currentView === MAINTAIN_STATISTIC_VIEW"
        :data="currentMaintain"
        @onBack="handleMaintainStatisticBack">
      </MaintainStatistic>
    </div>
  </div>
</template>

<script>
  import FrontSideTable from "../../template/FrontSideTable.vue"
  import MaintainBridge from "../../template/MaintainBridge.vue"
  import MaintainStatistic from "../../template/MaintainStatistic.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils";

  let oldName = "";

  /** 养护计划视图 */
  const MAINTAIN_VIEW = 1;

  /** 桥梁视图 */
  const BRIDGE_VIEW = 2;

  /** 养护统计界面 */
  const MAINTAIN_STATISTIC_VIEW = 3;

  export default {
    name:"MakePlan",
    data() {
      //名称重复校验
      let nameValidator = (rule, value, callback)=>{
        if(oldName === value) {
          callback();
        } else if(this.tableData.some(item=>item.name === value)) {
          callback(new Error("计划名称重复"));
        } else {
          callback();
        }
      };

      return {
        currentView:MAINTAIN_VIEW,
        currentMaintain:{},
        tableData:[],
        columns:[
          {prop:"name", label:"养护计划"},
          {prop:"bridgeCount", label:"桥梁总数"},
          {prop:"totalCost", label:"养护费用（元）"},
          {prop:"createUserName", label:"制订人"},
          {prop:"createDate", label:"制订日期", sortable:true},
          {prop:"notes", label:"备注"}
        ],
        searchProps:["name", "notes", "createUserName"],
        form:{},
        rules:{
          name:[
            {required:true, message:"请输入养护计划名称", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ]
        },
        loadingForm:false,
        //静态常量
        MAINTAIN_VIEW,
        BRIDGE_VIEW,
        MAINTAIN_STATISTIC_VIEW
      }
    },
    methods: {
      handleAdd() {
        oldName = "";
        clearFields(this.form);
      },
      handleEdit(data) {
        oldName = data.name;
        this.form = {...data};
      },
      handleTableCreated(dataList) {
        this.dataList = dataList;
      },
      handleManage(data) {
        this.currentView = BRIDGE_VIEW;
        this.currentMaintain = data;
      },
      handleCount(data) {
        this.currentView = MAINTAIN_STATISTIC_VIEW;
        this.currentMaintain = data;
      },
      handleMaintainStatisticBack() {
        this.currentView = MAINTAIN_VIEW;
      },
      handleBack() {
        this.currentView = MAINTAIN_VIEW;
        if(this.$refs["maintainTable"]) this.$refs["maintainTable"].fetchData();
      }
    },
    components:{FrontSideTable, MaintainBridge, MaintainStatistic}
  }
</script>



// WEBPACK FOOTER //
// MakePlan.vue?72aed69d
